import { useState, useEffect } from 'react';
import { Pie, measureTextWidth } from '@ant-design/charts';
import bankHolderStatistic from './bankHolderStatistic';
import { set } from 'lodash-es';
import { P } from '@antv/g2plot';

const DemoPie = (props) => {
  function renderStatistic(containerWidth, text, style) {
    var _measureTextWidth = (0, measureTextWidth)(text, style),
      textWidth = _measureTextWidth.width,
      textHeight = _measureTextWidth.height;
    var R = containerWidth / 2;
    var scale = 1;
    if (containerWidth < textWidth) {
      scale = Math.min(
        Math.sqrt(
          Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2))),
        ),
        1,
      );
    }
    var textStyleStr = 'width:'.concat(containerWidth, 'px;');
    return '<div style="'
      .concat(textStyleStr, ';font-size:')
      .concat(scale, 'em;line-height:')
      .concat(scale < 1 ? 1 : 'inherit', ';">')
      .concat(text, '</div>');
  }
  const [pieData, setPieData] = useState([
    {
      type: '国有持股',
      value: 25,
    },
    {
      type: '私有持股',
      value: 25,
    },
    {
      type: '外资持股',
      value: 25,
    },
    {
      type: '广泛持股',
      value: 25,
    },
  ]);
  useEffect(() => {
    let holderstatistic = bankHolderStatistic.filter((bank) => bank.name === props.enterprise.name);
    holderstatistic = holderstatistic.length
      ? holderstatistic[0]
      : {
          name: props.enterprise.name,
          indivisual: '0.25',
          foreign: '0.25',
          gov: '0.25',
          other: '0.25',
        };
    const pd = [
      {
        type: '国有持股',
        value: Number(holderstatistic.gov),
      },
      {
        type: '私有持股',
        value: Number(holderstatistic.indivisual),
      },
      {
        type: '外资持股',
        value: Number(holderstatistic.foreign),
      },
      {
        type: '广泛持股',
        value: Number(holderstatistic.other),
      },
    ];
    setPieData(pd);
  }, [props.enterprise]);

  const config = {
    color: ['#9254DE', '#531DAB', '#D3ADF7', '#B37FEB'],
    appendPadding: 10,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.64,
    meta: {
      value: {
        formatter: function formatter(v) {
          return ''.concat(v, '%');
        },
      },
    },
    label: {
      type: 'inner',
      offset: '-50%',
      style: { textAlign: 'center' },
      autoRotate: false,
      content: ({ value }) => `${(value * 100).toFixed(2)}%`,
    },
    statistic: {
      title: {
        offsetY: -4,
        customHtml: function customHtml(container, view, datum) {
          var _container$getBoundin = container.getBoundingClientRect(),
            width = _container$getBoundin.width,
            height = _container$getBoundin.height;
          var d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
          var text = datum ? datum.type : '总计';
          return renderStatistic(d, text, { fontSize: 28 });
        },
      },
      content: {
        offsetY: 4,
        style: { fontSize: '30px' },
        customHtml: function customHtml(container, view, datum, data) {
          var _container$getBoundin2 = container.getBoundingClientRect(),
            width = _container$getBoundin2.width;
          var total = data.reduce(function (r, d) {
            return r + d.value;
          }, 0);
          var text = datum ? ((datum.value / total) * 100).toFixed(2) + '%' : '100%';

          return renderStatistic(width, text, { fontSize: 32 });
        },
      },
    },
    interactions: [{ type: 'element-active' }, { type: 'pie-statistic-active' }],
  };
  return <Pie {...config} data={pieData} />;
};

export default DemoPie;
